<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="add_form" size="small" :label-width="labelWidth">
        <el-form-item label="材料名称：" prop="materialName">
          <el-input v-model.trim="addForm.materialName"></el-input>
        </el-form-item>
        <el-form-item label="材料产地：" prop="materialOriginPlace">
          <el-input v-model.trim="addForm.materialOriginPlace"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所在城市：">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item> -->
        <el-form-item label="品牌logo：">
          <ImageUpload v-model="addForm.brandLogo" tip="图片尺寸1:1,大小在1M以内"></ImageUpload>
        </el-form-item>
        <el-form-item label="所属公司：" prop="belongCompany">
          <el-input v-model.trim="addForm.belongCompany"></el-input>
        </el-form-item>
        <el-form-item label="发展历史：" prop="developmentHistory">
          <div class="develop_input">
            <el-input v-model.trim="year" class="a_sort_input" placeholder="输入输入年份"></el-input>
            <el-input v-model.trim="term" class="a_input" placeholder="输入重要内容"></el-input>
            <el-button icon="el-icon-plus" :disabled="!term || !year" @click="addHistory">添加</el-button>
          </div>
          <div class="develop_history">
            <div class="cell" v-for="(item, index) in (addForm.developmentHistory || [])" :key="index">
              <span> {{item.year?item.year + '年,':''}}{{ item.history }}</span>
              <i class="el-icon-close" @click="removeHistory(item)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="产品简介：" class="long_form_item">
          <el-input type="textarea" v-model.trim="addForm.productIntroduce" rows="5" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="详细介绍：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.detailIntroduce" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.detailIntroduce"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 产品型号 开始 -->
    <div class="content" v-show="step == 2">
      <el-form class="material_form" ref="modelForm" :model="modelForm" :rules="modelFormRules" size="small" label-width="100px">
        <div class="material_box">
          <div class="avatar">
            <el-form-item label="" label-width="0" prop="modelLogo">
              <ImageUpload v-model="modelForm.modelLogo" size="small"></ImageUpload>
            </el-form-item>
          </div>
          <div class="input_box">
            <el-form-item label="型号名称：" prop="modelName">
              <el-input v-model.trim="modelForm.modelName"></el-input>
            </el-form-item>
            <el-form-item label="参考价：" prop="referencePrice">
              <el-input v-model.trim="modelForm.referencePrice"></el-input>
            </el-form-item>
          </div>
          <div class="icon_box">
            <el-button type="default" size="small" icon="el-icon-plus" round @click="addModel">添加</el-button>
          </div>
        </div>
      </el-form>
      <div class="goods_tab" v-if="modelList && modelList.length">
        <div class="tab_head">
          <div class="tr">
            <div class="th">型号信息</div>
            <div class="th">操作</div>
          </div>
        </div>
        <div class="tab_body">
          <div class="tr" v-for="(item, index) in modelList" :key="index">
            <div class="td">
              <MaterialHospital :info="item"></MaterialHospital>
            </div>
            <div class="td">
              <el-link type="danger" @click="removeModel(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
      <el-button type="primary" size="small" @click="nextStep(3)">保存，下一步</el-button>
    </div>
    <!-- 第二步 产品型号 end -->

    <!-- 第四步 平台运营 开始 -->
    <div class="content" v-show="step == 3">
      <el-form :model="addForm" ref="secondForm" :rules="secondFormRules" class="" size="small" :label-width="labelWidth">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model.trim="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model.trim="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第四步 平台运营 end -->

  </div>
</template>
<script>
import AreaSelect from "@/components/province";
import AddressMap from "@/components/map";
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import MaterialHospital from "@/components/hospital/material.vue";
import {
  ADD_QUALIFICATION_MATERIAL_INFO,
  EDIT_QUALIFICATION_MATERIAL_INFO,
  GET_QUALIFICATION_MATERIAL_INFO,
  ADD_PRODUCT_MODELINFO,
  DELETE_PRODUCT_MODELINFO,
} from "@/http/information";
import { deepClone, showModal, showToast } from "@/common/util";
import { CHECK_NUMBER } from "@/common/validator";
export default {
  components: {
    AreaSelect,
    AddressMap,
    ImageUpload,
    WangEditor,
    MaterialHospital,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "产品型号", id: 2 },
        { name: "平台运营", id: 3 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      developList: [],
      addFormRules: {
        materialName: [
          { required: true, message: "请输入材料名称", trigger: "blur" },
        ],
        materialOriginPlace: [
          { required: true, message: "请输入材料产地", trigger: "blur" },
        ],
        belongCompany: [
          { required: true, message: "请输入所属公司", trigger: "blur" },
        ],
        developmentHistory: [
          { required: true, message: "请选择发展历史", trigger: "change" },
        ],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [
          { required: true, message: "请选择是否首页", trigger: "change" },
        ],
        initReadCnt: [
          { required: true, message: "请输入初始阅读数", trigger: "blur" },
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false,
      term: "",
      year: "",
      modelForm: {},
      modelFormRules: {
        modelLogo: [
          { required: true, message: "请上传型号logo", trigger: "change" },
        ],
        modelName: [
          { required: true, message: "请输入型号名称", trigger: "blur" },
        ],
        referencePrice: [
          { required: true, message: "请输入参考价", trigger: "blur" },
          { validator: CHECK_NUMBER,message:'请输入两位小数以内的数字',trigger: "blur" },
        ],
      },
      modelList: [],
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = row.id;
        });
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },
    // 下一步
    nextStep(num) {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        });
        return false;
      }
      _this.step = num;
    },

    // 获取详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_QUALIFICATION_MATERIAL_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 品牌logo
        if (obj.brandLogo && obj.brandLogo.length) {
          // let arr = [];
          // obj.brandLogo.map((k) => {
          //     arr.push({
          //         name: k,
          //         url: BASEURL + k,
          //         path: k,
          //     });
          // });
          obj.brandLogo = obj.brandLogo.split(",");
        }

        this.modelList = obj.productModelInfoList || [];
        delete obj.productModelInfoList;

        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);
      let list = this.modelList || [];

      // 品牌logo
      if(o.brandLogo){
        o.brandLogo = o.brandLogo.toString();
      }

      if (list && list.length) {
        let arr = [];
        list.map((k) => {
          arr.push(k.id);
        });
        o.productModelIds = arr;
      }

      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        let callBack = ADD_QUALIFICATION_MATERIAL_INFO;
        let msg = "新增成功";
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          callBack = EDIT_QUALIFICATION_MATERIAL_INFO;
          msg = "编辑成功";
        }

        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 添加历史
    addHistory() {
      let list = this.addForm.developmentHistory || [];
      let term = this.term;
      let year = this.year;
      let idx = list.findIndex((k) => k == term);
      if (idx >= 0) {
        showToast({
          message: "该发展历史已存在",
        });
        return false;
      }
      let o = { year: year, history: term };
      list.push(o);
      //list.push(this.year)
      this.$set(this.addForm, "developmentHistory", list);
      this.term = "";
      this.year = ''
    },

    // 删除历史
    removeHistory(item) {
      let arr = this.addForm.developmentHistory || [];
      let list = arr.filter((k) => k.history != item.history);
      this.$set(this.addForm, "developmentHistory", list);
    },

    // 添加产品型号
    addModel() {
      let _this = this;
      _this.$refs.modelForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.modelForm);
        if (oParams.modelLogo && oParams.modelLogo.length) {
          // let arr = []
          // oParams.modelLogo.map(k => {
          //     arr.push(k.path);
          // })
          oParams.modelLogo = oParams.modelLogo.toString();
        }
        ADD_PRODUCT_MODELINFO(oParams).then((res) => {
          if (res.code == 200) {
            let list = _this.modelList || [];
            oParams.id = res.data;
            list.push(oParams);
            _this.modelForm = {};
          }
        });
      });
    },

    // 删除产品型号
    removeModel(row) {
      let _this = this;
      showModal({
        message: "确认删除该产品型号吗？",
        type: "warning",
        showCancelButton: true,
        success: function () {
          DELETE_PRODUCT_MODELINFO({ id: row.id }).then((res) => {
            if (res.code == 200) {
              let list = _this.modelList || [];
              let arr = list.filter((k) => k.id != row.id);
              _this.modelList = arr;
            }
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>